<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>Backbone.Marionette.js Library</title>
	<link rel="stylesheet" href="css/app.css">
	<link rel="stylesheet" href="css/jquery-ui-1.9.2.css">
	<link rel="stylesheet" href="css/demos.css">
	<script type="text/javascript" src="js/lib/jquery.js"></script>
	<script type="text/javascript" src="js/lib/underscore.js"></script>
	<script type="text/javascript" src="js/lib/backbone.js"></script>
	<script type="text/javascript" src="js/lib/backbone.marionette.js"></script>
</head>
<body>
	<div>
		<a href="#show">SHOW</a>
	</div>
	<div id="container">
	</div>

	<script type="text/html" id="sample-template">
   	<p>This is an ItemView<p>
    	<%= value1 %> </br>
    	<%= value2 %> </br>
	</script>

	<script>
   var controller;
   var router;
	var sampleModel;
	var sampleView;

	var BookStoreApp = new Marionette.Application({});

	var BookStoreController = Marionette.Controller.extend({
		initialize: function(options){
            console.log("Controller: initialize");
        },
		displayBooks : function (){
			console.log("I will display books...");
		} 
    });   

    var BookStoreRouter = Marionette.AppRouter.extend({
		controller :  BookStoreController,
	    appRoutes: {
	        "#show": "displayBooks"
	    }
    });

	var SampleView = Backbone.Marionette.ItemView.extend({
		template : '#sample-template'
	});

	var SampleModel = Backbone.Model.extend({
		defaults : {
			value1 : "A random Value",
			value2 : "Another Random Value"
		}
	});

    BookStoreApp.addInitializer(function () {
         controller = new BookStoreController({});
         router = new BookStoreRouter({controller:controller});
			sampleModel = new SampleModel();
			sampleView = new SampleView({model:sampleModel, el: '#container'});
			sampleView.render();
    });

    BookStoreApp.on('initialize:after', function () {
		if (Backbone.history) {
	    	Backbone.history.start();
	    }
	});
    BookStoreApp.start();
	</script>
</body>
</html>
